<template>
  <div class="wrapper">
    <dx-header-bar :title="title"></dx-header-bar>
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      class="scroll-view"
      @refreshing="$_onRefresh"
      @endReached="$_onEndReached">
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <template v-if="type === 'cityLine'">
        <md-field class="scroll-view-item" v-for="(item,index) in dataList" :key="index">
          <div slot="header" class="view-item-header">
            <span class="index">{{index + 1}}.</span>
            <span class="title">{{item.REGION}}</span>
          </div>
          <md-detail-item title="评分:">
            <div class="detail-item-content">{{item.SCORE}}</div>
          </md-detail-item>
          <md-detail-item title="解析时间（ms）:">
            <div class="detail-item-content">{{item.PARSE_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="首屏打开时间（ms）:">
            <div class="detail-item-content">{{item.FIRST_OPEN_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="连接时间（ms）:">
            <div class="detail-item-content">{{item.CONNECT_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="页面加载时间（ms）:">
            <div class="detail-item-content">{{item.PAGE_LOADING_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="吞吐率（KB/S）:">
            <div class="detail-item-content">{{item.THROUGHPUT_RATE}}</div>
          </md-detail-item>
          <md-detail-item title="成功率（%）:">
            <div class="detail-item-content">{{item.SUCCESS_RATE}}</div>
          </md-detail-item>
        </md-field>
      </template>
      <template v-if="type === 'worst'">
        <md-field class="scroll-view-item" v-for="(item,index) in dataList" :key="index">
          <div slot="header" class="view-item-header">
            <span class="index">{{index + 1}}.</span>
            <span class="title">{{item.GOAL_NAME}}</span>
          </div>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
              <th>指标</th>
              <th>移动</th>
              <th>电信</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>评分</td>
              <td>{{item.QUALITY_SCORE}}</td>
              <td>{{item.OTHER_SCORE}}</td>
            </tr>
            <tr>
              <td>解析时间（ms）</td>
              <td>{{item.PARSE_TIME}}</td>
              <td>{{item.OTHER_PARSE_TIME}}</td>
            </tr>
            <tr>
              <td>首屏打开时间（ms）</td>
              <td>{{item.FIRST_OPEN_TIME}}</td>
              <td>{{item.OTHER_FIRST_OPEN_TIME}}</td>
            </tr>
            <tr>
              <td>连接时间（ms）</td>
              <td>{{item.CONNECT_TIME}}</td>
              <td>{{item.OTHER_CONNECT_TIME}}</td>
            </tr>
            <tr>
              <td>页面加载时间（ms）</td>
              <td>{{item.PAGE_LOADING_TIME}}</td>
              <td>{{item.OTHER_PAGE_LOADING_TIME}}</td>
            </tr>
            <tr>
              <td>吞吐率（KB/S）</td>
              <td>{{item.THROUGHPUT_RATE}}</td>
              <td>{{item.OTHER_THROUGHPUT_RATE }}</td>
            </tr>
            <tr>
              <td>成功率（%）</td>
              <td>{{item.SUCCESS_RATE}}</td>
              <td>{{item.OTHER_SUCCESS_RATE}}</td>
            </tr>
            </tbody>
          </table>
        </md-field>
      </template>
      <template v-if="type === 'top'">
        <md-field class="scroll-view-item" v-for="(item,index) in dataList" :key="index">
          <div slot="header" class="view-item-header">
            <span class="index">{{index + 1}}.</span>
            <span class="title">{{item.GOAL_NODE_NAME}}</span>
          </div>
          <md-detail-item title="评分:">
            <div class="detail-item-content">{{item.SCORE}}</div>
          </md-detail-item>
          <md-detail-item title="解析时间（ms）:">
            <div class="detail-item-content">{{item.PARSE_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="首屏打开时间（ms）:">
            <div class="detail-item-content">{{item.FIRST_OPEN_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="连接时间（ms）:">
            <div class="detail-item-content">{{item.CONNECT_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="页面加载时间（ms）:">
            <div class="detail-item-content">{{item.PAGE_LOADING_TIME}}</div>
          </md-detail-item>
          <md-detail-item title="吞吐率（KB/S）:">
            <div class="detail-item-content">{{item.THROUGHPUT_RATE}}</div>
          </md-detail-item>
          <md-detail-item title="成功率（%）:">
            <div class="detail-item-content">{{item.SUCCESS_RATE}}</div>
          </md-detail-item>
        </md-field>
      </template>

      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import { ScrollView, ScrollViewRefresh, ScrollViewMore, Field, DetailItem } from 'mand-mobile';
import { getCitiesLine, getEndGuildWeb, getTopGuildWeb } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [Field.name]: Field,
    [DetailItem.name]: DetailItem
  },
  data() {
    return {
      title: this.$route.query.title,
      type: this.$route.query.type,
      list: 0,
      isFinished: false,
      dataList: []
    };
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  methods: {
    loadCitiesLineData() {
      getCitiesLine().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.dataList = data;
        }
        this.$refs.scrollView.finishRefresh();
      }).catch(error => {
        console.log(error);
      });
    },
    loadEndGuildWeb() {
      getEndGuildWeb().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.dataList = data;
        }
        this.$refs.scrollView.finishRefresh();
      }).catch(error => {
        console.log(error);
      });
    },
    loadTopGuildWeb() {
      getTopGuildWeb().then(result => {
        const data = result.data;
        if (data instanceof Array && data.length) {
          this.dataList = data;
        }
        this.$refs.scrollView.finishRefresh();
      }).catch(error => {
        console.log(error);
      });
    },
    loadData() {
      switch (this.type) {
        case 'cityLine':
          this.loadCitiesLineData();
          break;
        case 'worst':
          this.loadEndGuildWeb();
          break;
        case 'top':
          this.loadTopGuildWeb();
          break;
        default:
      }
    },
    $_onRefresh() {
      this.loadData();
      this.isFinished = true;
    },
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.isFinished = true;
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    height: 100%
    display: flex
    flex-direction: column

  .scroll-view
    flex: 1

    .scroll-view-item
      margin-bottom: 20px
      padding: 20px

      .detail-item-content
        flex: 1

      .view-item-header
        color: theme-color
        font-size: 32px
        font-weight: bold

        .index
          margin-right: 20px
          color: #333

  table
    line-height: 60px
    background: #fff
    font-size: 28px
    text-align: center

    tr
      td
        &:nth-of-type(1)
          border-left: 1px solid #eee

    th, td
      border-bottom: 1px solid #eee
      border-right: 1px solid #eee

    thead
      tr
        background: #f5f9fe

        th
          &:nth-of-type(1)
            border-left: 1px solid #eee

</style>
